<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/jquery/jquery.js"></script>
</head>
<body>
    <form id="myForm">
        <input type="text" name="username"> 
        <br><br>
        <textarea cols="30" rows="10" name="info"></textarea> 
        <br><br>
        <input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女
        <input type="radio" name="sex" value="未知">未知
        <br><br>
        <input type="checkbox" name="skill" value="html">html
        <input type="checkbox" name="skill" value="css">css
        <input type="checkbox" name="skill" value="JS">JS
        <input type="checkbox" name="skill" value="vue">vue
        <br><br>
        <select name="a">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
        <br><br>
        <input type="file" name="pic">
        <br><br>
        <input type="button" value="发送请求" onclick="uploadParams()"> 
    </form>


    <script>

        /*  
        jquery ajax 而言，文件上传依然是为 options.data 属性进行参数设定
            配置中data 取值定义为FormData类型的数据对象,需要和options其它属性完成配合使用,否则运行报错
                 -> jquery ajax的定义主要是为普通ajax请求(简单参数请求)提供简化的功能操作
                 -> 为了简化方法使用,默认所有请求的请求头 Content-type 都会被自动设置为 application/x-www-form-urlencoded
                 -> 所以jquery ajax 文件上传时需要手动关闭 jquery 对 Content-Type 的设置,通过 配置项.contentType:false 完成
                 -> jquery ajax 定义的data 参数如果为对象数据，默认都会被完成 查询参数的转换( key=value&key=value…… )
                 -> 所以jquery ajax 文件上传时需要手动关闭 jquery 对 data 数据的转换设置,通过 options.processData:false 完成

            配置中xhr 属性构建 ajax 请求发送前的对 XMLHttpRequest 的重新设定
                 -> 取值为 Function,该方法执行与jquery ajax 请求构建之前
                 -> 方法内部可以通过 jquery 工具函数 $.ajaxSettings 获取当前ajax的所有配置,在配置中存在方法 xhr,通过执行该方法可以获取当前请求构建XMLHttpRequest对象
                 -> 必须将重新设定的 XMLHttpRequest 作为返回值返回,如果没有返回当前的ajax将不会发生请求 
                 
        */
        function uploadParams(){
           /*  
           FormData对象的作用
            1.模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式
            2.异步上传二进制文件
            3.表单中需要提交的数据必须具有name属性 */

            // let fd=new FormData(form表单的DOM对象);
            // fd.append("username","获取的是对应的文本框的值");

            let fd=new FormData($("#myForm")[0]);
            $.ajax({
                url:"/jquery/uploadFile",
                method:"post",
                data:fd,
                contentType:false,//关闭默认设置
                processData:false,//关闭默认设置
                dataType:"json",
                xhr:function(){

                    //通过xhr配置来获取当前请求对应的XMLHttpRequest对象
                    // console.log($.ajaxSettings.xhr());

                    let x=$.ajaxSettings.xhr();
                    x.upload.onprogress=function(e){//事件对象
                        console.log(e);
                    };

                    return x;
                },
                success:function(data){
                    console.log(data);
                }

            });
        }

    </script>
</body>
</html>